<template>
  <view class="my-collapse">
    <template v-for="(item, index) in list">
        <view :key="index" class="item" v-show="!doFilter || item.show" @click="handlerItemClick(item)">
           
			<view class="icon">
              <image :src="item.icon || '@/static/logo.png'" mode="aspectFill"></image>
            </view>
			
            <slot name="content" :item="item" v-if="$slots"></slot>
            <view class="name" v-else>{{item.label}}</view>
        </view>
    </template>
  </view>
</template>

<script>
  export default {
    name: 'listItem',
    options: {
      styleIsolation: 'shared',
			addGlobalClass: true,
    },
    props: {
      list: Array,
      showCount: Boolean,
      doFilter: Boolean
    },
    data() {
      return {}
    },
    methods: {
      countChildrens: function (array) {
        var count = 0;
        array.forEach(n => {
          if (n.children) {
            count += this.countChildrens(n.children);
          } else {
            count ++;
          }
        });
        return count;
      },
      getTitle: function (item) {
        if (this.showCount) {
          return item.label + `  (${this.countChildrens(item.children)})`;
        } else {
          return item.label;
        }
      },
      handlerItemClick: function (item) {
        this.$emit('onItemClick', item);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-collapse {
    /deep/ .u-collapse-item__content__text {
      padding: 24rpx 0 0 20rpx;
    }

    /deep/ .u-collapse-item__content.expanded {
      height: 100% !important;
    }

    .item {
      height: 80rpx;
      display: flex;
      align-items: center;
      box-sizing: content-box;
      padding: 10rpx 0;

      &:not(:last-child) {
        border-bottom: 2rpx solid #eaebec;
        margin-bottom: 10rpx;
      }

      .icon {
        image {
          width: 80rpx;
          height: 80rpx;
        }
      }

      .name {
        font-size: 30rpx;
        margin-left: 30rpx;
      }
    }
  }
	.hide {
		display: none !important;
	}
</style>